<template>
  <div class="content-box">
    <Table :data='state' :title="title" @paginate="paginatefn" @edit="editfn" />
    <!-- 编辑 -->
    <Edit :show="dialogFormVisible" @close="closefn" @confirm="confirmfn" :data='editdata' />
    <AssignRoles @assign="assignfn" />
  </div>
</template>
  
<script setup lang='ts'>
import Table from './components/adminTable.vue'
import * as http from '@/request/api'
import { reactive, ref, toRefs } from 'vue';
import type { ITitle } from '#/global'
import dayjs from 'dayjs'
import Edit from './components/adminEdit.vue'
import EventBus from '@/utils';
import AssignRoles from './components/adminAssignRoles.vue'


// 请求参数
const params: AdminListParams = reactive({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});

const title: ITitle = {
  id: "编号",
  username: "账号",
  nickName: "姓名",
  email: "邮箱",
  createTime: "添加时间",
  loginTime: "最后登陆",
  status: "是否启用",
  admin_edit: "操作",
};

// 封装请求数据
let state = ref({} as AdminListRespone)
let stateEdit = ref([] as AdminListResponelist[])
function getdata(params: AdminListParams) {
  http.admin.AdminList(params).then((res) => {
    stateEdit.value = JSON.parse(JSON.stringify(res.data.list))
    state.value = res.data
    state.value.list.map(item => {
      item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss');
      item.loginTime = item.loginTime ? dayjs(item.loginTime).format('YYYY-MM-DD HH:mm:ss') : ''
      return item
    })
  })
}
getdata(params)
// 用户列表数据
// const state = reactive<{ resData: AdminListRespone }>({
//   resData: {
//     list: [],
//     pageNum: 1,
//     pageSize: 10,
//     total: 0,
//     totalPage: 0
//   }
// })
// const { resData } = toRefs(state)

// 切换分页
const paginatefn = (value: number) => {
  params.pageNum = value;
  getdata(params)
}

// 编辑弹框
const dialogFormVisible = ref(false)
const editdata = ref({} as AdminListResponelist)
function editfn(id: number) {
  dialogFormVisible.value = true
  let index = stateEdit.value.findIndex(item => item.id === id)
  editdata.value = stateEdit.value[index]
}
function closefn() {
  dialogFormVisible.value = false
}
function confirmfn() {
  dialogFormVisible.value = false
  getdata(params)
}
// 添加
EventBus.on('addData', () => {
  dialogFormVisible.value = true
})

// 搜索
EventBus.on('search', (val: string) => {
  params.keyword = val.trim()
  getdata(params)
})
// 分配角色
function assignfn() {
  getdata(params)
}

</script>

<style scoped>
.content-box {
  padding: 10px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}
</style>

